import React, { useMemo, useState } from 'react';
import { connect } from 'umi';
import { Card, Tag } from 'antd';
import classNames from 'classnames';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { withRoutePage } from '@/utils/enhanceUtils';
import { pageTabProps } from '@/pages/SalaryManage/utils';

import BaseSettingProvider from '@/pages/SalaryManage/components/BaseSettingProvider';
import salaryStyle from '@/pages/SalaryManage/salaryManage.less';
import useHistoryBlock from '@/pages/SalaryManage/hooks/useHistoryBlock';
import { OrganizationNameHead } from '@/pages/SalaryManage/components/OrganizationName';
import SelfHelpFund from './SelfHelpFund';
import { ApproveInfoContext, defaultApproveInfo } from './ApproveInfoContext';

const Page = ({ history, shgId, organizationCode }) => {
    const selfHelpFund = useMemo(() => <SelfHelpFund shgId={shgId} organizationCode={organizationCode} />, []);
    const [approveInfo, setApproveInfo] = useState(defaultApproveInfo);
    useHistoryBlock(history);

    return (
        <PageHeaderWrapper type="success">
            <BaseSettingProvider organizationCode={organizationCode}>
                <ApproveInfoContext.Provider value={{ approveInfo, setApproveInfo }}>
                    <Card
                        title={
                            <>
                                待生效档案
                                {approveInfo?.effectYear && approveInfo?.effectMonth ? (
                                    <Tag color="cyan" className={classNames(salaryStyle.noBorderTag, salaryStyle.ml8)}>
                                        {`${approveInfo.effectYear}-${approveInfo.effectMonth < 10 ? '0' : ''}${
                                            approveInfo.effectMonth
                                        }`}{' '}
                                        起
                                    </Tag>
                                ) : null}
                            </>
                        }
                        bodyStyle={{ paddingTop: 0 }}
                        {...pageTabProps()}
                        extra={<OrganizationNameHead organizationCode={organizationCode} />}
                    >
                        {selfHelpFund}
                    </Card>
                </ApproveInfoContext.Provider>
            </BaseSettingProvider>
        </PageHeaderWrapper>
    );
};

export default withRoutePage(
    connect((state, { location }) => ({
        organizationCode: location?.query?.organizationCode,
        shgId: location?.query?.shgId
    }))(Page)
);
